:root {
  --bg: #f7f7f7; /* fond par défaut */
  --fg: #111111; /* texte par défaut */
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* empêche le scroll */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* moderne */
  background: var(--bg);
  color: var(--fg);
  font-family: 'Roboto', system-ui, -apple-system, Arial, sans-serif;
  font-weight: 500;
}

.container {
  position: relative;
  width: 90%;
  max-width: 500px;
  text-align: center;
  container-type: inline-size; /* important pour cqw */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logo {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  color: inherit;
  fill: currentColor; /* svg principal */
}

/* Icônes sociaux */
.socialico {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;   /* ? évite qu'ils collent au bas */
  margin-right: 6px;        /* espace entre eux */
  line-height: 1;           /* force une boîte compacte */
}

.bloc-social .col-right a {
  display: inline-block;
  vertical-align: middle;
}

/* ===== Apparence ===== */
a {
  color: inherit;
}

/* ===== Bloc habillage ===== */
.hello    { top: -260%; left: 0;   text-align: left; }
.standard { top: -180%; left: 0;   text-align: left; } 
.est      { top: -180%; left: 28%; text-align: left; }
.atelier  { top: -100%; left: 28%; text-align: left; }
.de       { top: -100%; left: 54%; text-align: left; }
.creation { top: -100%; right: 0%; text-align: right; }
.dediee   { bottom: -100%; left: 0%; text-align: left; }
.ala      { bottom: -100%; left: 28%; text-align: left; }
.com      { bottom: -100%; left: 54%; text-align: right; }
.repr     { bottom: -180%; left: 28%; text-align: left; }
.archi    { bottom: -180%; right: 0%; text-align: right; }
.sta      { bottom: -250%; right: 0%; text-align: left; }
.social   { top: 550%; right: 28%; text-align: left; }

/* ===== Bloc contenu ===== */
.bloc-creation {
  position: absolute;
  top: 350%;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  text-align: left;
  line-height: 1.6;
  font-size: 18px;
}

.col-left {
  grid-column: 1;
}

.col-right {
  position: absolute;
  top: 0;
  left: 28%;
  right: 0;
  text-align: left;
}

/* ===== Bloc social ===== */
.bloc-social {
  position: absolute;
  top: 600%; /* ajuste pour être juste sous bloc-creation */
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  text-align: left;
  line-height: 1.6;
  font-size: 18px;
}

.bloc-social .col-left {
  grid-column: 1;
}

.bloc-social .col-right {
  position: absolute;
  top: 0;
  left: 28%;
  right: 0;
  text-align: left;
}

.bloc-social .col-left,
.bloc-social .col-right {
  opacity: 0;
  visibility: hidden;
}

/* ===== Row ===== */
.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  text-align: left;
  line-height: 1.6;
}

/* ===== Taille texte uniforme ===== */
.row,
.word,
.left-line {
  font-size: clamp(12px, 3cqw, 24px); /* fluide avec cqw */
  line-height: 1.6;
  font-weight: 500;
}

@supports not (width: 1cqw) {
  .row,
  .word,
  .left-line {
    font-size: clamp(12px, 3vw, 24px); /* fallback vw */
  }
}

/* ===== Ancien système .word ===== */
.word {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  user-select: text;
  cursor: default;
}

/* ===== Alt/line toggle ===== */
.line-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.line,
.alt {
  display: block;
  width: 100%;
}

.line {
  cursor: pointer;
  text-decoration: underline;
}

.alt {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg) !important;
  color: var(--fg) !important;
  z-index: 20;
  white-space: normal;
  line-height: 1.6;
}

/* Quand actif : bascule */
.line-wrapper.active .line {
  opacity: 0;
  visibility: hidden;
}
.line-wrapper.active .alt {
  opacity: 1;
  visibility: visible;
  text-decoration: none;
}